<template>
    <z-paging ref="paging" v-model="dataList" @query="queryList">
    	<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
    	<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
        <view class="item" v-for="(item,index) in dataList" :key="index">
            <view class="item-title">{{item.title}}</view>
        </view>
    </z-paging>
</template>

<script setup>
    import { ref } from 'vue';
    const paging = ref(null)
	// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
    const dataList = ref([])
    const tabIndex = ref(0)
	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
    const queryList = (pageNo, pageSize) => {
    	const params = {
    		pageNo: pageNo,
    		pageSize: pageSize,
    		type: tabIndex.value + 1
    	}
    	// 模拟数据加载
    	setTimeout(() => {
    		paging.value.complete(['第' + params.pageNo, '第' + params.pageNo, '第' + params.pageNo,
    			'第' + params.pageNo, '第' + params.pageNo, '第' + params.pageNo, '第' + params.pageNo,
    			'第' + params.pageNo, '第' + params.pageNo, '第' + params.pageNo
    		]);
    	}, 2000)
    }
</script>